<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./monthDate.js"></script>
  <link rel="stylesheet" href="./monthDate.css">
</head>


<body>
  <h4>采取月日选择框默认值</h4>
  <input type="text" id="monthDate" readonly>
  <br>
  <h4>点击确定按钮选择月日</h4>
  <input type="text" id="monthDate2" readonly>
  <br>
  <h4>联动月日</h4>
  <input type="text" id="monthDate3" placeholder="开始月日" readonly>至
  <input type="text" id="monthDate4" placeholder="截止月日" readonly>
  <br>
  <h4>当前元素没有值的情况下，打开月日选择框默认选中9月9日</h4>
  <input type="text" id="monthDate5" readonly>
  <br>
  <h4>最小可选月日，参考月日联动(最大可选月日同理)</h4>
  <input type="text" id="monthDate6" readonly>
  <input type="hidden" id="monthDate7" value="09-09">
  <br>
  <h4>替换默认的链接符号</h4>
  <input type="text" id="monthDate8" placeholder="x/x" readonly>
  <input type="text" id="monthDate9" placeholder="x月x日" readonly>

  <script>
    // 采取月日选择框默认值
    new MonthDate({
      // 月日触发的元素
      initEleId: '#monthDate',
      // 选择天数的回调：点选天数与点击确定键
      ok: function (value, month, date) {
        document.querySelector('#monthDate').value = value;
      },
      // 点击清空的回调：点击清空键
      reset: function () {
        document.querySelector('#monthDate').value = '';
      },
    }).init();
    // 点击确定选择月日
    new MonthDate({
      // 月日触发的元素
      initEleId: '#monthDate2',
      // 选择天不关闭月日选择框
      isAutoClose: false,
      // 选择天数的回调：点选天数与点击确定键
      ok: function (value, month, date) {
        document.querySelector('#monthDate2').value = value;
      },
      // 点击清空的回调：点击清空键
      reset: function () {
        document.querySelector('#monthDate2').value = '';
      },
    }).init();
    // 联动月日
    new MonthDate({
      // 月日触发的元素
      initEleId: '#monthDate3',
      // 设定联动最大值的元素id
      maxEleId: '#monthDate4',
      // 选择天数的回调：点选天数与点击确定键
      ok: function (value, month, date) {
        document.querySelector('#monthDate3').value = value;
      },
      // 点击清空的回调：点击清空键
      reset: function () {
        document.querySelector('#monthDate3').value = '';
      }
    }).init();
    new MonthDate({
      // 月日触发的元素
      initEleId: '#monthDate4',
      // 设定联动最小值的元素id
      minEleId: '#monthDate3',
      // 选择天数的回调：点选天数与点击确定键
      ok: function (value, month, date) {
        document.querySelector('#monthDate4').value = value;
      },
      // 点击清空的回调：点击清空键
      reset: function () {
        document.querySelector('#monthDate4').value = '';
      }
    }).init();
    // 打开月日选择框默认选中9月9日
    new MonthDate({
      // 初始化月日值
      openInitMD: '09-09',
      // 月日触发的元素
      initEleId: '#monthDate5',
      // 选择天数的回调：点选天数与点击确定键
      ok: function (value, month, date) {
        document.querySelector('#monthDate5').value = value;
      },
      // 点击清空的回调：点击清空键
      reset: function () {
        document.querySelector('#monthDate5').value = '';
      },
    }).init();
    // 最小可选月日，参考月日联动
    new MonthDate({
      // 月日触发的元素
      initEleId: '#monthDate6',
      // 设定联动最小值的元素id
      minEleId: '#monthDate7',
      // 选择天数的回调：点选天数与点击确定键
      ok: function (value, month, date) {
        document.querySelector('#monthDate6').value = value;
      },
      // 点击清空的回调：点击清空键
      reset: function () {
        document.querySelector('#monthDate6').value = '';
      },
    }).init();
    // 替换默认的链接符号
    new MonthDate({
      // 月日触发的元素
      initEleId: '#monthDate8',
      // 替换默认的链接符号
      symbol: '/',
      // 选择天数的回调：点选天数与点击确定键
      ok: function (value, month, date) {
        document.querySelector('#monthDate8').value = value;
      },
      // 点击清空的回调：点击清空键
      reset: function () {
        document.querySelector('#monthDate8').value = '';
      },
    }).init();
    new MonthDate({
      // 月日触发的元素
      initEleId: '#monthDate9',
      // 替换默认的链接符号
      symbol: '月日',
      // 选择天数的回调：点选天数与点击确定键
      ok: function (value, month, date) {
        document.querySelector('#monthDate9').value = value;
      },
      // 点击清空的回调：点击清空键
      reset: function () {
        document.querySelector('#monthDate9').value = '';
      },
    }).init();
  </script>
</body>

</html>